/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2017-10-30 11:45:56
 * @version $Id$
 *   插件定义大盒子  溢出隐藏
	ul要定义宽度或者高度
 */

;(function($){

  //插件是给节点用的
  
  $.fn.zhanku=function(obj){

  //初始化对象 
  var meth={

     attr:"width",
     attr1:{"marginLeft":"-1130px"},
     attr3:{"marginLeft":"0px"},
     attr2:"marginLeft",
     parent:"ul",
     child:"ul>li",
     over:"mouseover",
     out:"mouseout",
     even:"click",

  };

 var ex=$.extend(meth,obj);
 var time;
 var root=this;
     root.css({'overflow':'hidden','position':'relative'});
var $ul=$(ex.parent,root);//获取ul元素

var $li=$(ex.child,root);//获取li元素

var $li_width=$li.outerWidth(true);//获取li的宽度 margin+padding+border+width

var $li_num=$li.length;//获取li的个数  .size();

var $ul_width=$li_num*$li_width;//设置ul的宽度
    $ul.css(ex.attr, $ul_width);

var $pic=$("div",root); 
    $pic.css('display', 'none');

var $L=$("#left",root);
var $R=$("#right",root);   
    root.on(ex.over,function(){
            
            clearInterval(time);
            $pic.css({'color':'orange','opacity':'0.5'});
            $pic.show();

     });
     root.on(ex.out,function(){
     	  time=setInterval(change,2000);
     	  $pic.css({'color':'#fff','opacity':'0.3'});
     	  $pic.hide();
     });

  $L.on(ex.even,function(){
  	 $ul.animate(ex.attr1, 1000,function(){
          $(ex.child).first().appendTo($ul);
          $ul.css(ex.attr3);
         });
  });

  $R.on(ex.even,function(){
    
      $ul.css(ex.attr1);
      $(ex.child).last().prependTo($ul);
      $ul.animate(ex.attr3, 1000);


  });


time=setInterval(change,2000);


function change(){

  $ul.animate(ex.attr1, 1000,function(){
          $(ex.child).first().appendTo($ul);
          $ul.css(ex.attr3);
         });

      }

  };


})(jQuery);